<template>
  <a-layout>
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
    >
      <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="dark"
        mode="inline"
      >
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>首页</span>
            </span>
          </template>
          <a-menu-item
            key="sub11"
            @click="$router.push('/dashboard')"
          >仪表盘</a-menu-item>
          <a-menu-item
            key="sub12"
            @click="$router.push('/banner')"
          >焦点图管理</a-menu-item>
          <a-menu-item
            key="sub13"
            @click="$router.push('/about')"
          >企业特色管理</a-menu-item>
        </a-sub-menu>
        <a-menu-item
          key="2"
          @click="$router.push('/aboutUs')"
        >
          <video-camera-outlined />
          <span>关于我们</span>
        </a-menu-item>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <user-outlined />
              <span>产品列表</span>
            </span>
          </template>
          <a-menu-item
            key="sub21"
            @click="$router.push('/products')"
          >产品管理</a-menu-item>
          <a-menu-item
            key="sub22"
            @click="$router.push('/productscreate')"
          >产品添加</a-menu-item>
          <a-menu-item
            key="sub23"
            @click="$router.push('/categories')"
          >分类商品</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
            <span>
              <user-outlined />
              <span>管理员</span>
            </span>
          </template>
          <a-menu-item
            key="sub31"
            @click="$router.push('/user')"
          >管理员管理</a-menu-item>
          <a-menu-item
            key="sub32"
            @click="$router.push('/userCreate')"
          >添加管理员</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <div class="right">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <a-breadcrumb>
            <a-breadcrumb-item @click="$router.push('/')">首页</a-breadcrumb-item>
            <a-breadcrumb-item>{{ $route.meta.title }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="/">
                首页
              </a-menu-item>
              <a-menu-item key="loginout">
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
          <div class="logo2">
            <span>admin999</span>
            <caret-down-outlined />
          </div>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content>
        <tag-nav></tag-nav>
        <transition>
          <router-view class="view"></router-view>
        </transition>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  CaretDownOutlined,
} from "@ant-design/icons-vue";
import baseUrl from "@/uitils/baseUrl";
import TagNav from "@/components/TagNav.vue";
import { useRouter } from "vue-router";
import { userStore } from "@/store/index";
import { onBeforeRouteUpdate } from "vue-router";
import { defineComponent, ref } from "vue";
import { logout } from "@/api/login";
const selectedKeys = ref<string[]>(["1"]);
const collapsed = ref<boolean>(false);
const $router = useRouter();
const $store = userStore();
const handleMenuClick = (obj: any) => {
  if (obj.key.includes("/")) {
    $router.push(obj.key);
  } else {
    // 退出登录
    logout({}).then((res: any) => {
      // 清空store pinia里的初始化仓库的方法
      $store.$reset();
      $router.replace("/login");
    });
  }
};
</script>

<style scoped lang="scss">
.view {
  width: 96%;
  height: 80vh;
  margin: 2%;
  margin-top: 0px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 0 0 5px 5px;
  background-color: #fff;
}

.ant-layout-header {
  display: flex;
  justify-content: space-between;
}

.right {
  display: flex;
  align-items: center;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo2 {
  width: 70px;
  height: 64px;
  margin-right: 30px;
  display: flex;
  align-items: center;

  .anticon {
    margin-left: 8px;
    margin-top: 6px;
  }
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.ant-layout {
  width: 100% !important;
  height: 100% !important;
}

.site-layout .site-layout-background {
  background: #fff;
}

.v-enter-active {
  transition: all 0.3s ease;
}

.v-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.v-leave-to {
  transform: translateX(40px);
  opacity: 0;
}

.v-enter-from {
  transform: translateX(40px);
  opacity: 0;
}
</style>